<template>
    <main class="pie-dialog">
        <n-modal v-model:show="showModal" preset="dialog"
        :style="{width: dialogWidth, height: modalHeight}"
        :title="dialogTitle"
        :show-icon="false"
        :title-class="'modal-title'"
        :on-close="handleNegativeClick">
            <template #prev></template>
            <n-upload
                multiple
                directory-dnd
                action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                :max="5"
            >
                <n-upload-dragger>
                <div style="margin-bottom: 12px">
                    <n-icon size="48" :depth="3">
                    <archive-icon />
                    </n-icon>
                </div>
                <n-text style="font-size: 16px">
                    点击或者拖动文件到该区域来上传
                </n-text>
                <n-p depth="3" style="margin: 8px 0 0 0">
                    请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                </n-p>
                </n-upload-dragger>
            </n-upload>
            <template #next></template>
            <template #action>
                <n-button ghost color="#8a2be2" @click="handleNegativeClick">
                    <template #icon><n-icon><Close /></n-icon></template>
                    下载模板
                </n-button>
                <n-button ghost color="#8a2be2" @click="handleNegativeClick">
                    <template #icon><n-icon><Close /></n-icon></template>
                    取消
                </n-button>
                <n-button color="#8a2be2" @click="handlePositiveClick">
                    <template #icon><n-icon><Checkmark /></n-icon></template>
                    上传文件
                </n-button>
            </template>
        </n-modal>
    </main>
</template>

<script setup lang="ts">
import { defineProps, ref, watch, onMounted } from 'vue'
import { Close, Checkmark } from '@vicons/ionicons5'
import { computed } from 'vue';

const emit = defineEmits(['dialogEvent'])
let props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    },
    dialogWidth: {
        type: String,
        default: '600px'
    },
    dialogHeight: {
        type: String,
        default: '300px'
    },
    dialogTitle: {
        type: String,
        default: "弹窗"
    },
    data: {
        type: Object,
        default: () => { } 
    }
    // title?: String
})
let showModal = ref(props.showModal)
let modalHeight = computed(() => { return props.dialogHeight + '80px'})
onMounted(() => {
    console.log('=====', props.data)
})
// watch(
//   () => props.data,
//   (newValue) => {
//     console.log('=====', newValue)
//   },
//   { deep: true, immediate: true }
// )
let handleNegativeClick = () => {
    let data = {
        type: "no",
        data: {}
    }
    emit('dialogEvent', data)
}
let handlePositiveClick = () => {
    let data = {
        type: "sure",
        data: props.data
    }
    emit('dialogEvent', data)
}
</script>

<style>
</style>
